<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>
<style>
  .red,
  .blue,
  .yellow {
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }

  .red {
    background-color: red;
  }

  .blue {
    background-color: blue;
  }

  .yellow {
    background-color: yellow;
  }
</style>

<body>
  <div id="app">
    <button @click="showNum">切</button>
    <div>
      <!-- <transition name="row"> -->
      <transition name="row" mode="out-in"> //加入out-in消除切换闪烁问题
        <!-- 这里的key是为了防止key相同,在底层有些时候无法判断 -->
        <div class="red" key="A" v-if=" show == 'A' "></div>
        <div class="blue" key="B" v-if=" show == 'B' "></div>
        <div class="yellow" key="C" v-if=" show == 'C' "></div>
      </transition>
    </div>
  </div>

  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        show: "A",
      },
      methods: {
        showNum() {
          if (this.show == "A") {
            return this.show = "B";
          } else if (this.show == "B") {
            return this.show = "C";
          } else {
            return this.show = "A";
          }
        }
      }
    })
  </script>
</body>

</html>